export default {
  data () {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [{
          required: true,
          message: '请输入登录名称',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 10,
          message: '长度在 3 到 10 个字符',
          trigger: 'blur'
        }
        ],
        // 验证密码是否合法
        password: [{
          required: true,
          message: '请输入登录密码',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 15,
          message: '长度在 6 到 15 个字符',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm () {
      // console.log(this);
      this.$refs.loginFormRef.resetFields()
    },
    // 点击登陆按钮
    login () { // 先获取验证表单结果 true/false
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return // 表示验证结果为false,阻止向下执行
        // qs将post方式提交的表单数据封装
        var qs = require('qs')
        const postData = qs.stringify({
          username: this.loginForm.username,
          password: this.loginForm.password
        })
        // 解构并取别名
        const { data: res } = await this.$axios.post('UserController/login.action', postData)
        console.log(res)
        if (res.status === -1) {
          return this.$message.error('用户名不存在！')
        } else if (res.status === 0) {
          return this.$message.error('用户名或密码错误！')
        } else if (res.status === 1) {
          // 1. 将登录成功之后的 user，保存到客户端的 sessionStorage 中
          //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
          //   1.2 user 只应在当前网站打开期间生效，所以将 user保存在 sessionStorage 中
          window.sessionStorage.setItem('user', JSON.stringify(res.user))
          
        }
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$message.success('欢迎您！' + res.user.username)
        this.$router.push('/home')
      })
    }
  }
}
